<script setup lang="ts">
import {
  ElButton,
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElMessageBox,
  ElTag,
  ElText,
} from "element-plus";
import { computed, ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { ProTablePlus, ProTableScope } from "@/modules/package/table";
import { useRoute } from "vue-router";

import ApiTicket from "@/api/ticket";
import useEnum from "@/hooks/useEnum";
import useRequest from "@/hooks/useRequest";

import { TicketSnInfo } from "@/types/ticket";

const { params } = useRoute();

const { get: getFrom } = useEnum("EnumTicketSnFrom");
const { get: getType } = useEnum("EnumCouponType");
const { get: getSnOpen } = useEnum("EnumTicketSnOpen");
const { get: getState } = useEnum("EnumTicketSnState");
const { get: getCouponStatus } = useEnum("EnumTicketSnCouponStatus");

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "优惠券名称", prop: "coupon_name", minWidth: 160 },
  { label: "类型", slot: "coupon_type", minWidth: 160 },
  { label: "状态", slot: "status", minWidth: 160 },
  { label: "核销商家", prop: "merchant_title" },
  { label: "核销时间", prop: "verify_time" },
];

const switchState = ref(0);

const { isFetching, data, refresh, onFetchResponse } = useRequest<{
  info: TicketSnInfo;
}>(ApiTicket.ticketSnDetail, { defaultParams: { sn: params.sn } });
const info = computed(() => data.value?.info);

onFetchResponse(() => {
  switchState.value = info.value?.sn_open || 0;
});

//
const {
  isFetching: submitFetching,
  run,
  onFetchResponse: onSubmitResponse,
} = useRequest(ApiTicket.updateTicketSnStatus, { immediate: false });

onSubmitResponse(() => refresh());

const handleChange = async () => {
  const val = info.value?.sn_open === 1 ? 0 : 1;

  const res = await ElMessageBox.prompt(
    `你正在${val ? "启用" : "禁用"}该票券！`,
    "操作提示",
    {
      type: "warning",
      inputPlaceholder: "请输入备注",
    }
  );

  run({ sns: [params.sn], sn_open: val, remark: res.value });
};
</script>

<template>
  <ElCard class="mb-4">
    <ElDescriptions v-loading="isFetching">
      <ElDescriptionsItem label="券码">{{ info?.sn }}</ElDescriptionsItem>
      <ElDescriptionsItem label="订单号">
        {{ info?.order_sn }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="来源">
        {{ getFrom(info?.from, "label") }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="券名">{{ info?.pkg_name }}</ElDescriptionsItem>
      <ElDescriptionsItem label="所属活动">
        {{ info?.act_name }}
      </ElDescriptionsItem>

      <ElDescriptionsItem label="所属场次">
        {{ info?.etime_name }}
      </ElDescriptionsItem>

      <ElDescriptionsItem label="状态">
        <ElText :type="getState(info?.status, 'color')">
          {{ getState(info?.status, "label") }}
        </ElText>
      </ElDescriptionsItem>

      <ElDescriptionsItem label="平台状态">
        <ElTag effect="dark" :type="getSnOpen(info?.sn_open, 'color')">
          {{ getSnOpen(info?.sn_open, "label") }}
        </ElTag>

        <ElButton
          circle
          :icon="Edit"
          size="small"
          class="ml-2"
          type="primary"
          :loading="submitFetching"
          @click="handleChange"
        />
      </ElDescriptionsItem>

      <ElDescriptionsItem label="备注">{{ info?.remark }}</ElDescriptionsItem>
    </ElDescriptions>
  </ElCard>

  <ProTablePlus :columns="tableColumns" :list="info?.user_coupons">
    <ProTableScope>
      <template #coupon_type="{ row }">
        {{ getType(row.coupon_type, "label") }}
      </template>

      <template #status="{ row }">
        <ElTag :type="getCouponStatus(row.status, 'color')">
          {{ getCouponStatus(row.status, "label") }}
        </ElTag>
      </template>
    </ProTableScope>
  </ProTablePlus>
</template>
